/* * @Author: hhy * @Date: 2019-01-18 14:09:29 * @Last Modified by: hhy * @Last
Modified time: 2019-05-29 12:26:38 * @文件说明: 小提示--icon+文字 */
<template>
  <div class="h-tip" @mouseleave="showTip = false">
    <el-tooltip
      :placement="placement"
      manual
      :popper-class="vclass"
      :visible-arrow="false"
      v-model="showTip"
    >
      <template #content>
        <slot>提示文字</slot>
      </template>

      <div @click="showTip = !showTip">
        <ic :i="icon" :color="color" cursor />
      </div>
    </el-tooltip>
  </div>
</template>

<script>
import { defineComponent, toRefs, reactive } from "vue";
export default defineComponent({
  name: "h-tip",
  props: {
    placement: {
      type: String,
      default: "right"
    },
    icon: {
      type: String,
      default: "icon-wenhao"
    },
    vclass: {
      type: String,
      default: "t-tooltip"
    },
    color: {
      type: String,
      default: "#999"
    }
  },
  setup() {
    const state = reactive({
      showTip: false
    });
    return {
      ...toRefs(state)
    };
  }
});
</script>
<style lang="scss" scoped>
.h-tip {
  display: inline-block;
}
</style>
